<template>
    <pageTabelLayout>
        <template #pageHeader>
            <div class="search-form divClass" v-if="headerShow" style="margin-top:20px">
                <div>
                    <a-form size="small" :model="pageData" layout="inline">
                        <a-form-item label-col-flex="80px" label="当班日期">
                            <a-date-picker  popup-container="html"  class="bacClass" v-model="pageData.beginTime" />至<a-date-picker  popup-container="html"  class="bacClass"
                                v-model="pageData.endTime" />
                        </a-form-item>
                        <!-- <a-form-item label-col-flex="80px" label="未完成工序">
                            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder=""
                                v-model="pageData.workshop" @press-enter="huiche" />
                        </a-form-item> -->
                        <a-form-item label="流转卡号" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input allow-clear class="bacClass" placeholder="请扫流转卡号二维码" v-model="pageData.flowCardCode"
                                ref="getFocus1" @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label-col-flex="80px" label="布号">
                            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder=""
                                v-model="pageData.greyCode" @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label-col-flex="80px" label="品名">
                            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder=""
                                v-model="pageData.productName" @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label-col-flex="80px" label="色号">
                            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder=""
                                v-model="pageData.colorCode" @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label-col-flex="80px" label="色称">
                            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder=""
                                v-model="pageData.colorName" @press-enter="huiche" />
                        </a-form-item>
                        <!-- <a-form-item label-col-flex="0px" label="">
                            <a-space direction="horizontal" size="large">
                                <a-checkbox-group v-model="pageData['checkVal']">
                                    <a-checkbox value="1">含终止流转卡</a-checkbox>
                                    <a-checkbox value="2">含回修流转卡</a-checkbox>
                                </a-checkbox-group>
                            </a-space>
                        </a-form-item> -->
                    </a-form>
                </div>
                <div class="my-tool-bar">
                    <Toolbar style="float:right" :items="['查询', '导出']" @select="selectHandler" @export="exports">
                    </Toolbar>
                </div>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
        </template>
        <template #pageTabel>
            <a-tabs   :lazy-load="true" :justify="true" default-active-key="1" @change="handoff">
                <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height:100%;width: 100%;z-index:999;">
                    <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady"
                        style="height:95%;" :localeText="localeText1" :defaultColDef="defaultColDef"
                        :rowClassRules="rowClassRules" class='ag-theme-alpine' :rowData="table.dataList" :columnDefs="tc">
                    </AgGridVuesCopys>
                </a-spin>
            </a-tabs>
        </template>
        <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
            @change="PageSize" @page-size-change="change1" style="justify-content: center;" :page-size="size"
            :current="page" />

    </pageTabelLayout>
</template>
<script lang="ts" >
import { post } from '@/api/http'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table'
import emitter from '@/hooks/useEventBus'
import { ref, reactive, onMounted, toRefs } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { Button, Form, Message, Modal } from '@arco-design/web-vue'
import { FormInstance } from '@arco-design/web-vue/es/form'
import axios from 'axios'
import filedownload from 'js-file-download'
import usePermission from '@/store/modules/permission'
import PageTabelLayout from '@/components/pageTabelLayout.vue'
import MyTable from '@/components/MyTable'
import ButtonRenderer from '@/components/TableCellRenderer/ButtonRenderer'
import { template } from 'lodash'
import { setupGlobalComponent } from '@/layouts'
import { pagingList } from '@/api/paging'
// 引入

import { localeText } from '@/api/aggridZw'
import printJS from 'print-js'
interface BrandInfo {
    "id": any,
    "deleteState": any,
}

export default {
    name: "ProcessInventory",
    setup() {
        const total = ref(0);
        const page = ref(1);
        const size = ref(10);
        const headerShow = ref<boolean>(true)
        //分页
        function PageSize(val: any) {
            page.value = val

            doRefresh();

        }
        function change1(val: any) {
            size.value = val

            doRefresh();

        }
        let id = ref(1);
        const handoff = (e: any) => {
            id.value = e
            selectHandler()
        }

        function doRefresh() {

            pageData.pageLoading = true
            post({
                url: "dwWorkShop/hzDailyOne/getProcessStock",
                data: {
                    "page": page.value,
                    "size": size.value,
                    beginTime: pageData.beginTime,
                    endTime: pageData.endTime,
                    greyCode: pageData.greyCode,
                    flowCardCode: pageData.flowCardCode,
                    productName: pageData.productName,
                    colorCode: pageData.colorCode,
                    colorName: pageData.colorName
                },
            })
                .then(({ data, code, message }: any) => {
                    if (code === 200) {
                        let list = []
                        list = data.data
                        table.handleSuccess(list);
                        total.value = data.total;
                        gridOption.value.setRowData(list);
                    } else {
                        Message.error({
                            content: message,
                            duration: 5000,
                        })
                    }
                })
                .catch(console.log).finally(() => {
                    pageData.pageLoading = false
                })
        }

        const pagination = usePagination(doRefresh);
        const table = useTable();



        //定型部分
        let tc: any = [
            {
                headerName: "开单日期",
                field: "createOrderDate",
                width: 150,
            },
            {
                headerName: "流转卡号",
                field: "flowCardCode",
                width: 150,
            },
            {
                headerName: "布号",
                field: "greyCode",
                width: 150,
            },
            {
                headerName: "匹数",
                field: "houseNum",
                width: 150,
            },
            {
                headerName: "品名",
                field: "productName",
                width: 150,
            },
            {
                headerName: "色号",
                field: "colorCode",
                width: 150,
            },
            {
                headerName: "色称",
                field: "colorName",
                width: 150,
            },
            {
                headerName: "门幅",
                field: "device",
                width: 150,
            },
            {
                headerName: "克重",
                field: "flowCardWeight",
                width: 150,
            },
            {
                headerName: "上道工序",
                field: "device",
                width: 150,
            },
            {
                headerName: "上道工序完成时间",
                field: "device",
                width: 150,
            },
            {
                headerName: "正等待工序",
                field: "device",
                width: 150,
            },
            {
                headerName: "正等待工段",
                field: "device",
                width: 150,
            },
            {
                headerName: "工序流完成情况",
                field: "device",
                width: 150,
                cellRenderer: {
                    template: `<a-space><div>{{a}}</div></a-space>`,
                    setup(props: any) {
                        let a = ref("")
                        props.params.data.processInfo.forEach(function (o: any) {
                            if (o['state'] == 1) {
                                a.value += o['process'] + '√,'
                            } else {
                                a.value += o['process'] + ','
                            }
                        })
                        a.value = a.value.substr(0, a.value.length - 1);
                        return {
                            a,
                        }
                    },
                }
            },
            {
                headerName: "客户名称",
                field: "device",
                width: 150,
            },
            {
                headerName: "计划单号",
                field: "device",
                width: 150,
            },
        ]


        let a = [{
            showRowGroup: 'hide_def',
            "headerName": "",
            "checkboxSelection": true,
            "headerCheckboxSelection": true,
            "pinned": "left",
            "width": 50,
            resizable: false,
            filter: false,
            sortable: false,
            minWidth: 50,
            maxWidth: 50,
            lockPosition: "left",
        }]
        tc = a.concat(tc)
        const dataForm = reactive<BrandInfo>({
            "id": null,
            "deleteState": 0,
        })
        const pageData = reactive<{
            nameList: [],
            pageLoading: boolean,
            sectionList: any[]
            workshop: any
            beginTime: any
            endTime: any
            gdList: any[]
            nowTime: any
            checkVal: any[]
            circulatCard: any
            flowCardCode: any
            greyCode: any
            productName: any
            colorCode: any
            colorName: any
        }>({
            nameList: [],
            pageLoading: false,
            sectionList: [],
            workshop: "",
            beginTime: "",
            endTime: "",
            gdList: [],
            nowTime: "",
            checkVal: [],
            circulatCard: "",
            flowCardCode: "",
            greyCode: "",
            productName: "",
            colorCode: "",
            colorName: "",
        });

        onMounted(() => {
            // 切换tap到本页面执行的方法
            doRefresh();
        });

        //查询按钮
        const selectHandler = () => {
            page.value = 1
            doRefresh();

        }

        // 表格准备事件
        const gridOption = ref()
        const gridReady = (params: any) => {
            gridOption.value = params.api
        }

        const pagingList1: any = ref(pagingList)
        const handleChange = (_data: any) => {
            table.handleSuccess(_data);
        }

        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            enableColResize: true,
        }
        //表格中文显示
        const localeText1: any = ref(localeText)

        //回车模糊查询
        const huiche = () => {

            selectHandler();

        }


        let rowClassRules = {
            'colCss': (params: any) => {
                let amount = params.data.device;
                return amount == '合计';
            },
        };
        //导出
        const exports = () => {
            if (gridOption.value.getSelectedRows().length === 0) {
                Message.error('请先勾选')
                return
            } else {
                let idList: any = []
                gridOption.value.getSelectedRows().forEach(function (o: any) {
                    idList.push(o['id'])
                })
                //将表头拼接出来
                let head =
                    '<th>开单日期</th><th>流转卡号</th><th>布号</th><th>匹数</th><th>品名</th><th>色号</th><th>色称</th><th>门幅</th><th>克重</th><th>上道工序</th><th>上道工序完成时间</th><th>正等待工序</th><th>正等待工段</th><th>工序流完成情况</th><th>客户名称</th><th>计划单号</th>'
                //拿到当前表格数据与勾选的行做筛选

                let nowRow = table.dataList.filter(function (o) {
                    return (
                        gridOption.value
                            .getSelectedRows()
                            .map((o: any) => {
                                return o.id
                            })
                            .indexOf(o['id']) !== -1
                    )
                })
                let body = ''
                nowRow.forEach(function (o) {
                    body += '<tr><td>' + o['createOrderDate'] + '</td>'
                    body += '<td>' + o['flowCardCode'] + '</td>'
                    body += '<td>' + o['greyCode'] + '</td>'
                    body += '<td>' + o['houseNum'] + '</td>'
                    body += '<td>' + o['productName'] + '</td>'
                    body += '<td>' + o['colorCode'] + '</td>'
                    body += '<td>' + o['colorName'] + '</td>'
                    body += '<td>' + o['device'] + '</td>'
                    body += '<td>' + o['flowCardWeight'] + '</td>'
                    body += '<td>' + o['device'] + '</td>'
                    body += '<td>' + o['device'] + '</td>'
                    body += '<td>' + o['device'] + '</td>'
                    body += '<td>' + o['device'] + '</td>'
                    body += '<td>' + o['device'] + '</td>'
                    body += '<td>' + o['device'] + '</td>'
                    body += '<td>' + o['device'] + '</td>'
                    body += '<td>' + o['device'] + '</td>'
                    body += '</tr>'
                })
                tableToXlsx(head, '工序存量查询', body)
            }
        }
        function tableToXlsx(head: any, filename: any, body: any) {
            const uri = 'data:application/vnd.ms-excel;base64,',
                template = `<html>
            <head><meta charset="UTF-8"></head>
            <body><table border="1"><tr>${head}</tr>${body}</table></body>
        </html>`

            const a = document.createElement('a')
            a.href = uri + window.btoa(unescape(encodeURIComponent(template)))
            a.download = filename
            a.click()
            document.removeChild(a)
        }

        return {
            exports,
            id,
            rowClassRules,
            pagingList1,
            localeText1,
            pageData,
            dataForm,
            pagination,
            table,
            headerShow,
            total,
            page,
            size,
            tc,
            defaultColDef,
            gridOption,
            gridReady,
            huiche,
            selectHandler,
            handleChange,
            PageSize,
            change1,
            handoff,
            print,
        };
    },
    components: { Toolbar, PageTabelLayout,  }
}
</script>
<style scoped lang="less">
// 表格边框线条
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

:deep(.colCss) {
    background-color: #d0ffe2;
}

.table tr,
.table td span,
.table td {
    border: 1px solid #3e3e3e;
    text-align: center;
}
</style>